<template>
  <view class="container">
    <z-paging
      ref="paging"
      v-model="itemList"
      @query="queryList"
      :flex="true"
      empty-view-text="暂时还没有数据咯~"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      :empty-view-img-style="imgStyle"
    >
      <view slot="top">
        <u-navbar
          height="50"
          title="提现记录"
          title-size="36"
          back-icon-color="#333"
          title-color="#333"
        ></u-navbar>
        <!-- <u-gap height="20"  bg-color="#f2f2f2"></u-gap> -->
      </view>

      <view class="" style="padding: 20rpx">
        <view style="background-color: #fff; border-radius: 10rpx">
          <view class="filter">
            <view class="time-select">
              {{ time.year }}年{{ time.month }}月
              <u-icon style="margin-left: 10rpx" name="/static/img/more.png" size="15"></u-icon>
            </view>
            <p class="total">收入:¥2560.00，支出:¥1600.00，待结算:¥800.00</p>
          </view>

          <view class="itemView" v-for="(item, index) in itemList" :key="index">
            <view v-if="item.account && item.account.accountType == 'alipay'" class="itemHead">
              <view class="itemTitle">提现到支付宝</view>
              <view class="itemMin">2023-12-15 12:00</view>
            </view>
            <view v-if="item.account && item.account.accountType == 'wechat'" class="itemHead">
              <view class="itemTitle">提现到微信</view>
              <view class="itemMin">2023-12-15 12:00</view>
            </view>
            <view v-if="item.account && item.account.accountType == 'bank'" class="itemHead">
              <view class="itemTitle">提现到银行卡</view>
              <view class="itemMin">2023-12-15 12:00</view>
            </view>
            <view class="itemTime">
              <view v-if="item.transferStatus == 0 || item.transferStatus == 2" class="price">
                +200
              </view>
              <view v-if="item.transferStatus == 1" class="price"> +200 </view>
              <view v-if="item.transferStatus == 0" class="itemMin" style="color: #f54831"
                >受理中</view
              >
              <view v-if="item.transferStatus == 1" class="itemMin">提现成功</view>
              <view v-if="item.transferStatus == 2" class="itemMin">提现失败</view>
            </view>
          </view>
        </view>
      </view>

      <view class="" style="padding: 20rpx; display: none">
        <view style="background-color: #fff; border-radius: 10rpx">
          <view class="filter">
            <view class="time-select">
              {{ time.year }}年{{ time.month }}月
              <u-icon style="margin-left: 10rpx" name="/static/img/more.png" size="15"></u-icon>
            </view>
            <p class="total">收入:¥2560.00，支出:¥1600.00，待结算:¥800.00</p>
          </view>

          <view class="itemView" v-for="(item, index) in itemList" :key="index">
            <view v-if="item.status == 2" class="itemHead">
              <view class="itemTitle">提现到支付宝</view>
              <view class="itemMin">2023-12-15 12:00</view>
            </view>
            <view v-if="item.status == 3" class="itemHead">
              <view class="itemTitle">提现到微信</view>
              <view class="itemMin">2023-12-15 12:00</view>
            </view>
            <view class="itemTime">
              <view v-if="item.status == 1" class="price"> +200 </view>
              <view v-if="item.status == 1" class="itemMin" style="color: #f54831">受理中</view>
              <view v-if="item.status == 2" class="price"> -200 </view>
              <view v-if="item.status == 2" class="itemMin">提现成功</view>
              <view v-if="item.status == 3" class="price"> -200 </view>
              <view v-if="item.status == 3" class="itemMin">提现成功</view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
    <!-- <u-picker mode="time" v-model="show" @confirm="confirmTime" :params="params"></u-picker> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgStyle: {
        width: '12rem'
      },
      type: '',
      current: 0,
      tabList: [
        {
          name: '收益记录'
        },
        {
          name: '提现记录'
        }
      ],
      itemList: [
        { status: 2 },
        { status: 2 },
        { status: 3 },
        { status: 2 },
        { status: 3 },
        { status: 2 },
        { status: 3 },
        { status: 2 }
      ],
      params: {
        year: true,
        month: true,
        day: false,
        hour: false,
        minute: false,
        second: false
      },
      show: false,
      time: {
        year: '',
        month: ''
      }
    }
  },
  onLoad(otions) {
    this.type = otions.type
    let now = new Date()
    this.time.year = now.getFullYear()
    this.time.month = now.getMonth() + 1
    this.queryList(1, 10)
  },
  methods: {
    tabsChange(index) {
      this.current = index
    },
    queryList(pageNo, pageSize) {
      this.$u
        .get('/app-api/pay/cash-out-record/page', {
          pageNo,
          pageSize
        })
        .then((res) => {
          this.$refs.paging.complete(res.data.list)
        })
      // this.$u.get('/app-api/pay/cash-out-record/page')
      // this.$refs.paging.complete(this.itemList);
    },
    onWithdrawal() {
      this.$utils.route('/other/withdrawal/withdrawal')
    },
    routeTo(url) {
      uni.navigateTo({
        url
      })
    },
    confirmTime(e) {
      this.time.year = e.year
      this.time.month = e.month
    }
  }
}
</script>

<style>
page {
  background: #f0f1f2;
}
.coupon-banner {
  color: #fff;
  padding: 20rpx;
  /* background-image: url("/static//img/bg.jpg"); */
  position: relative;
}
.title-tip {
  font-size: 24rpx;
  padding: 15rpx 45rpx;
}
.title {
  font-size: 48rpx;
  padding: 15rpx 45rpx;
}

.info-item view {
  font-size: 30rpx;
}

.withdrawal-btn {
  width: 164rpx;
  height: 52rpx;
  /* background: url("/static/img/sjtx2.png") repeat fixed center; */
  position: absolute;
  top: 100rpx;
  right: 0;
  border-radius: 52rpx 0 0 52rpx;
  display: flex;
  align-items: center;
}

.coupon-push-info {
  display: flex;
  justify-content: space-around;
  padding: 15rpx 0;
}

.info-item {
  text-align: center;
  line-height: 55rpx;
}

.info-item p {
  font-size: 24rpx;
}

.info-item view {
  font-size: 30rpx;
}

.itemView {
  display: flex;
  align-items: center;
  line-height: 40rpx;
  height: 120rpx;
  border-bottom: 1px solid #ededed;
  padding: 20rpx;
}

.itemHead {
  flex: 1;
  font-size: 28rpx;
  font-weight: 400;
  color: #121212;
}
.itemMin {
  font-size: 24rpx;
  color: #999999;
}

.itemTitle {
  font-size: 28rpx;
}
.price {
  font-size: 30rpx;
}
.itemTime {
  text-align: right;
  font-size: 22rpx;
  font-weight: 400;
  color: #666666;
  margin-top: 15rpx;
}

.filter {
}
.time-select {
  padding: 10rpx 20rpx;
  font-size: 30rpx;
}
.total {
  font-size: 26rpx;
  color: #999999;
  padding: 10rpx 20rpx;
  border-bottom: 1px solid #ededed;
}
</style>
